import React, {
    createContext,
    useEffect, useState,
} from 'react'

// styles
import './App.css'

// routers
import {BrowserRouter as Router, Route, Switch, Redirect,} from "react-router-dom"
// routes
import HomeContainer from "./containers/home/home"
import VideoContainer from "./containers/video/video"
import GameContainer from "./containers/game/game"
import AIContainer from "./containers/AI/AI";
import GameRoomContainer from "./containers/game-room/game-room"
import MyContainer from "./containers/my/my"
import LoginContainer from "./containers/login/login"
import RegisterContainer from "./containers/register/register"
import UserInfoContainer from "./containers/userInfo/userInfo"
import MessageContainer from "./containers/msg/msg"
import FollowContainer from "./containers/follow/follow"
import WalletContainer from "./containers/wallet/wallet"
import ConsumeContainer from "./containers/consume/consume"
import RevenueContainer from "./containers/revenue/revenue"
import AccountInfoContainer from "./containers/account-info/account-info"
import WithdrawContainer from "./containers/withdraw/withdraw"
import ApplyStarContainer from "./containers/apply-star/ApplyStar"
import WithdrawRulesContainer from "./containers/withdraw-rules/withdraw-rules"
import SettingContainer from "./containers/setting/setting"
import HelpContainer from "./containers/help/help"
import WechatLoginContainer from "./containers/wechat-login/wechat-login"
import ForgetPasswordContainer from "./containers/forget-password/forget-password"
import GameFilter from "./containers/game-filter/game-filter"
import GameFilterBasketball from "./containers/game-filter-basketball/game-filter-basketball";
import SearchContainer from "./containers/search/search"
import StartLiveContainer from "./containers/start-live/start-live"
import NewSContainer from "./containers/news/news"
import TopStarContainer from "./containers/top-star/top-star"
import NewsListContainer from "./containers/newslist/newslist"
import AIPlanContainer from "./containers/AIPlan/AIPlan"
import PlanAttentionContainer from "./containers/plan-attention/plan-attention"
import HistoryContainer from "./containers/history/history";
import LiveRoomContainer from "./containers/live-room/live-room";
import AIOrder from "./containers/AI-order/AI-order";
import VipGoods from "./containers/vip-goods/vip-goods";
import PrivacyPolicy from "./containers/setting/components/PrivacyPolicy/PrivacyPolicy";
import UserPolicy from "./containers/setting/components/UserPolicy/UserPolicy";
import DepositPolicy from "./containers/deposit-policy/deposit-policy";
import FeedbackList from "./containers/feedback-list/feedback-list";
import CommonProblem from "./containers/common-problem/common-problem";
import TopicContainer from "./containers/topic/topic";
import AddTopic from "./containers/add-topic/add-topic";
import HowToInvite from "./containers/how-to-invite/how-to-invite";
import TopicDetail from "./containers/topic-detail/topic-detail";
import CommentDetail from "./containers/comment-detail/comment-detail";
import MyTopic from "./containers/my-topic/my-topic";
import TaskContainer from "./containers/task/task";
import Download from "./containers/download/download";
import MyAi from "./containers/my-ai/my-ai";
import RecentAI from "./containers/recent-ai/recent-ai.";
import TestContainer from "./containers/test/test";
import LuoDi from "./containers/luodi/luo_di";
import OuGuan from "./containers/ou_guan/ou_guan";
import Renwu from "./containers/ren_wu/ren_wu";
import Gift from "./containers/gift/gift";
import Intelligence from "./containers/intelligence/intelligence";
import PlanDetail from "./containers/plan-detail/plan-detail";
import PlanJubao from "./containers/plan_jubao";
import MyPlan from "./containers/my_plan/my_plan";
import ProApply from "./containers/pro-apply/pro_apply";
import SetProDetail from "./containers/set-pro-detail/set-pro-detail";
import MyProPlanPage from "./containers/my_pro_plan_page/my_pro_plan_page";
import AddPlan from "./containers/add-plan/add-plan";
import PlanProDetailPage from "./containers/plan-pro-detail-page/plan-pro-detail-page";
import BasketballHistory from "./containers/history/basketball-history";
import BasketballGameRoomContainer from "./containers/basketball-game-room-container/BasketballGameRoomContainer";
import TopicRules from "./containers/topic-rules/topic-rules";
import FuliContainer from "./containers/fuli/fuli";
import FuliResult from "./containers/fuli-result/fuli-result";
import MyFuli from "./containers/my-fuli/my-fuli";
import MyProIncome from "./containers/my-pro-income/my-pro-income";
import MyFuliRecord from "./containers/my-fuli-record/my-fuli-record";
import GradePlayer from "./containers/GradePlayer/GradePlayer";
import BestLineUp from "./containers/best-line-up/best-line-up";
import Forecast from "./containers/forecast/forecast";
import VoteList from "./containers/vote-list/vote-list";
import Mall from "./containers/mall/mall";
import MallDetail from "./containers/mall/mall-detail/mall-detail";
import MallRecord from "./containers/mall/mall-record/mall-record";
import MyBean from "./containers/mall/my-bean/my-bean";
// components
import AuthRoute from "./components/AuthRoute/AuthRoute"
// context
import {GlobalStore, store} from "./context";
import Euro from "./containers/euro/euro";
import MyEuroPlan from "./containers/euro/components/my-euro-plan";
import EuroPlan from "./containers/euro/components/euro-plan";
import EuroPlanRank from "./containers/euro/components/euro-plan-rank";
import EuroQuestionnaire from "./containers/euro/components/euro-questionnaire";
class App extends React.Component {

    // let cachedScripts = []
    // function useScript(src) {
    //     const [state, setState] = useState({
    //         loaded: false,
    //         error: false
    //     });
    //
    //     useEffect(
    //         () => {
    //             // If cachedScripts array already includes src that means another instance ...
    //             // ... of this hook already loaded this script, so no need to load again.
    //             if (cachedScripts.includes(src)) {
    //                 setState({
    //                     loaded: true,
    //                     error: false
    //                 })
    //             } else {
    //                 cachedScripts.push(src)
    //
    //                 // Create script
    //                 let script = document.createElement('script')
    //                 script.src = src
    //                 // script.async = true;
    //
    //                 // Script event listener callbacks for load and error
    //                 const onScriptLoad = (e) => {
    //                     setState({
    //                         loaded: true,
    //                         error: false
    //                     })
    //                 }
    //
    //                 const onScriptError = () => {
    //                     // Remove from cachedScripts we can try loading again
    //                     const index = cachedScripts.indexOf(src)
    //                     if (index >= 0) cachedScripts.splice(index, 1)
    //                     script.remove()
    //
    //                     setState({
    //                         loaded: true,
    //                         error: true
    //                     })
    //                 }
    //
    //                 script.addEventListener('load', onScriptLoad)
    //                 script.addEventListener('error', onScriptError)
    //
    //                 // Add script to document body
    //                 document.body.appendChild(script)
    //
    //                 // Remove event listeners on cleanup
    //                 return () => {
    //                     script.removeEventListener('load', onScriptLoad);
    //                     script.removeEventListener('error', onScriptError);
    //                 }
    //             }
    //         },
    //         [src] // Only re-run effect if script src changes
    //     )
    //     return [state.loaded, state.error]
    // }

    // useScript(loaded)

    componentDidMount() {
        this.setVh()
        this.onResize()
    }


    setVh = () => {
        let vh = window.innerHeight * 0.01
        document.documentElement.style.setProperty('--vh', `${vh}px`)
    }

    onResize = () => {
        window.addEventListener('resize', () => this.setVh())
    }

    render() {
        return (
            <GlobalStore.Provider value={store}>
                <Router>
                    <Switch>
                        {/* 主页面 */}
                        <Route path="/" exact render={() => <Redirect to="/game"/>}/>
                        <Route path="/home" exact component={HomeContainer}/>
                        <Route path="/video" component={VideoContainer}/>
                        <Route path="/game" exact component={GameContainer}/>
                        <Route path="/my" component={MyContainer}/>
                        <Route path="/ai" component={AIContainer}/>
                        <Route path="/ou_guan" component={OuGuan}/>
                        <Route path="/ren_wu" component={Euro}/>
                        {/*登录 注册*/}
                        <Route path="/login" component={LoginContainer}/>
                        <Route path="/wechat-login" component={WechatLoginContainer}/>
                        <Route path="/reg" component={RegisterContainer}/>
                        <Route path="/forget-password" component={ForgetPasswordContainer}/>

                        {/* 用户信息 */}
                        <AuthRoute path="/userinfo" component={UserInfoContainer}/>

                        {/* 消息 */}
                        <AuthRoute path="/msg" component={MessageContainer}/>

                        {/* 关注 */}
                        <AuthRoute path="/follow" component={FollowContainer}/>

                        {/* 钱包 */}
                        <AuthRoute path="/wallet" component={WalletContainer}/>

                        {/* 提现 */}
                        <AuthRoute path="/withdraw" component={WithdrawContainer}/>

                        {/* 提现说明 */}
                        <AuthRoute path="/withdraw-rules" component={WithdrawRulesContainer}/>

                        {/* 消费 */}
                        <AuthRoute path="/consume" component={ConsumeContainer}/>

                        {/* 资金 */}
                        <AuthRoute path="/revenue" component={RevenueContainer}/>

                        {/* 账户信息 */}
                        <AuthRoute path="/account-info" component={AccountInfoContainer}/>

                        {/* 申请成为主播 */}
                        <AuthRoute path="/apply-star" component={ApplyStarContainer}/>
                        {/* 设置 */}
                        <AuthRoute path="/setting" component={SettingContainer}/>
                        {/* 帮助与反馈 */}
                        <AuthRoute path="/help" component={HelpContainer}/>
                        <AuthRoute path="/feedback-list" component={FeedbackList}/>
                        {/* 赛事选择 */}
                        <Route path="/game-filter" exact component={GameFilter}/>
                        <Route path="/game-filter-basketball" exact component={GameFilterBasketball}/>
                        {/* 进入直播 */}
                        <Route path="/start-live" component={StartLiveContainer}/>
                        {/* 赛事直播间 */}
                        {/*<AuthRoute path="/game/:gameId" component={GameRoomContainer}/>*/}
                        <Route path="/game/:gameId" component={GameRoomContainer}/>
                        <Route path="/basketball/:gameId" component={BasketballGameRoomContainer}/>
                        {/* 赛事直播间 */}
                        {/*<AuthRoute path="/game/:gameId" component={GameRoomContainer}/>*/}
                        {/* 方案详情 */}
                        <AuthRoute path="/plan-detail" component={PlanDetail}/>
                        {/* 举报方案 */}
                        <AuthRoute path="/plan_jubao" component={PlanJubao}/>
                        {/* 我的方案 */}
                        <AuthRoute path="/my_plan" component={MyPlan}/>
                        {/* 专家申请 */}
                        <AuthRoute path="/pro_apply" component={ProApply}/>
                        {/* 专家详情 */}
                        <AuthRoute path="/set_pro_detail" component={SetProDetail}/>
                        {/* 我的主页 */}
                        <AuthRoute path="/my_pro_plan_page" component={MyProPlanPage}/>
                        {/* 专家主页 */}
                        <AuthRoute path="/plan-pro-detail-page/:uid" component={PlanProDetailPage}/>
                        {/* 添加方案 */}
                        <AuthRoute path="/add-plan" component={AddPlan}/>
                        {/* 情报 */}
                        <Route path="/intelligence/:gameId" component={Intelligence}/>
                        {/* 主播直播间 */}
                        <AuthRoute path="/live/:starId" component={LiveRoomContainer}/>
                        {/* 新闻列表 */}
                        <Route path="/newslist" component={NewsListContainer}/>
                        {/* 咨询详情页 */}
                        <Route path="/news/:newsId" component={NewSContainer}/>
                        {/* 搜索页 */}
                        <Route path="/search" component={SearchContainer}/>
                        {/* 排行榜 */}
                        <Route path="/top-star" component={TopStarContainer}/>
                        {/* AI预测购买计划 */}
                        <Route path="/AI-plan/:planType" component={AIPlanContainer}/>
                        {/* 翻倍盈利计划策略及注意事项 */}
                        <Route path="/plan-attention/:planType" component={PlanAttentionContainer}/>
                        {/* 历史关注页面 */}
                        <Route path="/history" component={HistoryContainer}/>
                        {/* 篮球历史关注页面 */}
                        <Route path="/history-basketball" component={BasketballHistory}/>
                        {/* 预测购买页 */}
                        <AuthRoute path="/order/:matchId" component={AIOrder}/>
                        {/* 会员权益 */}
                        <Route path='/vip-goods' component={VipGoods}/>
                        {/* 用户协议 */}
                        <Route path='/privacy-policy' component={PrivacyPolicy}/>
                        {/* 用户协议 */}
                        <Route path='/user-policy' component={UserPolicy}/>
                        {/* 充值协议 */}
                        <Route path='/deposit-policy' component={DepositPolicy}/>
                        {/* 社区规范 */}
                        <Route path='/topic-rules' component={TopicRules}/>
                        {/* 用户协议-ios */}
                        <Route path='/hios/privacy-policy-ios' component={PrivacyPolicy}/>
                        {/* 用户协议-ios */}
                        <Route path='/hios/user-policy-ios' component={UserPolicy}/>
                        {/* 充值协议-ios */}
                        <Route path='/hios/deposit-policy-ios' component={DepositPolicy}/>
                        {/* 如何邀请球友 */}
                        <Route path='/how-to-invite' component={HowToInvite}/>

                        {/* 常见问题 */}
                        <Route path='/common-problem' component={CommonProblem}/>

                        {/* 话题 */}
                        <Route path='/topic' exact component={TopicContainer}/>
                        {/* 话题详情 */}
                        <Route path='/topic/:topicId' exact component={TopicDetail}/>
                        {/* 子评论 */}
                        <Route path='/topic/:topicId/:commentId' exact component={CommentDetail}/>
                        {/* 发帖 */}
                        <Route path='/add-topic' exact component={AddTopic} />
                        {/* 我的话题 */}
                        <AuthRoute path='/my-topic' exact component={MyTopic} />

                        {/* 我购买的ai预测 */}
                        <AuthRoute path='/my-ai' exact component={MyAi}/>
                        {/* 最近预测 */}
                        <AuthRoute path='/recent-ai' exact component={RecentAI}/>

                        {/* 任务 */}
                        <AuthRoute path='/task' exact component={TaskContainer}/>

                        {/* 下载页 */}
                        <Route path='/download' exact component={Download}/>

                        {/* 测试 */}
                        <Route path='/test' exact component={TestContainer}/>
                        {/* 落地页 */}
                        <Route path='/luodi' exact component={LuoDi}/>
                        {/* 礼物 */}
                        <AuthRoute path='/gift' exact component={Gift}/>
                        {/* 福利 */}
                        <AuthRoute path='/fuli/:gameId' exact component={FuliContainer}/>
                        <AuthRoute path='/fuli-result/:gameId' exact component={FuliResult}/>
                        <AuthRoute path='/my-fuli' exact component={MyFuli}/>
                        <AuthRoute path='/my-pro-income' exact component={MyProIncome}/>
                        <AuthRoute path='/my-fuli-record' exact component={MyFuliRecord}/>
                        {/* 球员打分 */}
                        <Route path='/vote/player/:id' exact component={GradePlayer}/>
                        <Route path='/vote/line-up/:id' exact component={BestLineUp}/>
                        <Route path='/vote/forecast/:id' exact component={Forecast}/>
                        <Route path='/vote-list/:type' exact component={VoteList}/>
                        <Route path='/mall' exact component={Mall}/>
                        <Route path='/mall/:id' exact component={MallDetail}/>
                        <Route path='/mall-record' exact component={MallRecord}/>
                        <Route path='/my-bean' exact component={MyBean}/>
                        {/* 欧冠 */}
                        <Route path='/euro' exact component={Euro}/>
                        <Route path='/my-euro-plan' exact component={MyEuroPlan}/>
                        <Route path='/my-euro-plan' exact component={MyEuroPlan}/>
                        <Route path='/euro-plan/:id' exact component={EuroPlan}/>
                        <Route path='/euro-plan-rank' exact component={EuroPlanRank}/>
                        <Route path='/euro-questionnaire' exact component={EuroQuestionnaire}/>
                        {/* 重定向 */}
                        <Redirect to="/"/>
                    </Switch>
                </Router>
            </GlobalStore.Provider>
        )
    }


}

export default App
